<template>
    <div style="height: 100%;">
        <el-button class="ly-btn-disabled" type="primary" @click="backBtn">5秒后退回</el-button>
        <el-button class="ly-btn-disabled" type="primary" @click="setCurRowBtn(false)">0.5秒后选中第三行</el-button>
        <el-button class="ly-btn-disabled" type="primary" @click="setCurRowBtn(true)">0.5秒后选中第三行并开启编辑</el-button>
        <el-button class="ly-btn-disabled" type="primary" @click="clearBtn">3秒后强制取消编辑</el-button>
        <el-button class="ly-btn-disabled" type="primary" @click="resetBtn">重新赋值</el-button>
        <el-button class="ly-btn-disabled" type="primary" @click="compareChange">比较修改</el-button>
        <el-button class="ly-btn-disabled" type="primary" @click="editColumns">修改列显示</el-button>
        <br>
        <el-input v-model="state.searchStr" @input="search" />
        <div style="height: 500px;">
            <TableEdit
                ref="tableEdit"
                :data="state.data"
                :rules="state.rules"
                show-delete-column
                border
                :before-delete="beforeDelete"
                highlight-current-row
                height="100%"
                @current-change="currentChange"
                @row-click="rowClick"
            >
                <EditColumn type="sortable" />
                <EditColumn type="index" label="序号" width="200" />
                <EditColumn type="selection" />
                <EditColumn edit-type="datePicker" label="datePicker?" prop="date" format="MM-DD" value-format="MM-DD" width="200" @change="dateChange" />
                <EditColumn edit-type="datePicker" prop="daterange" type="daterange" width="200" @change="dateChange" />
                <EditColumn edit-type="timePicker" prop="time" format="HH:mm" value-format="HH:mm" width="200" />
                <EditColumn edit-type="timePicker" is-range prop="timerange" format="HH:mm" value-format="HH:mm" width="200" />
                <EditColumn edit-type="input" prop="address" width="200" show-overflow-tooltip />
                <EditColumn prop="address" show-overflow-tooltip width="200" :formatter="formatter" searchable />
                <EditColumn prop="age" />
                <EditColumn edit-type="select" prop="age" multiple width="200" :data="state.dataList" />
                <EditColumn edit-type="checkbox" prop="sex" label="男?" width="200" />
                <template #pagination>
                    <!-- <el-pagination
                        v-model:current-page="page.current"
                        v-model:page-size="page.size"
                        disabled
                        background
                        :page-sizes="[1,2,3,4,5]"
                        layout="sizes, prev, pager, next"
                        @current-change="currentChange"
                    /> -->
                </template>
            </TableEdit>
        </div>
    </div>
</template>

<script lang="ts">
export default { name: 'DemoTableEdit' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, ref, watch, nextTick, onMounted, useAttrs, useSlots, defineEmits } from 'vue'
// const slots = useSlots()
// const attrs = useAttrs()
// const emits = defineEmits()
const { proxy } = getCurrentInstance() as ComponentInternalInstance

const page = reactive({
    current: 1,
    size: 3,
})

const state = reactive({
    searchStr: '',
    data: [
        {
            id: 1,
            date: '2016-05-03',
            time: '',
            timerange: [],
            name: 'Tom',
            address: 'changed',
            age: [1],
            daterange: [],
            sex: 1,
        },
        {
            id: 3,
            date: '2016-05-04',
            time: '19:00:00',
            timerange: [],
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            age: [3],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 0,
        },
        {
            id: 4,
            date: '2016-05-01',
            time: '20:00:00',
            timerange: [],
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            age: [4],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 1,
        },
        {
            id: 5,
            date: '2016-05-01',
            time: '20:00:00',
            timerange: [],
            name: 'Tom',
            address: 'new',
            age: [4],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 1,
        },
    ],
    orgData: [
        {
            id: 1,
            date: '2016-05-03',
            time: '',
            timerange: [],
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            age: [1],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 1,
        },
        {
            id: 2,
            date: '2016-05-02',
            time: '18:00:00',
            timerange: [],
            name: 'Tom',
            address: 'deleted',
            age: [2],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 0,
        },
        {
            id: 3,
            date: '2016-05-04',
            time: '19:00:00',
            timerange: [],
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            age: [3],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 0,
        },
        {
            id: 4,
            date: '2016-05-01',
            time: '20:00:00',
            timerange: [],
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            age: [4],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 1,
        },
    ],
    dataList: [
        { label: '1岁', value: 1 },
        { label: '2岁', value: 2 },
        { label: '3岁', value: 3 },
        { label: '4岁', value: 4 },
        { label: '5岁', value: 5 },
    ],
    rules: {
        date: [
            { required: true, message: 'Please input Activity name', trigger: 'blur' },
            // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        address: [
            { required: true, message: 'Please input Activity name', trigger: 'blur' },
            // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
    },
    columns: ['index', 'date', 'daterange', 'time'],
})

const tableEdit = ref<any>(null)

const search = (val:string) => {
    tableEdit.value.search(val)
}

const backBtn = () => {
    setTimeout(() => {
        tableEdit.value.cancelEditing()
    }, 5000)
}

const setCurRowBtn = (editing:boolean) => {
    setTimeout(() => {
        tableEdit.value.setCurrentRow(state.data[2], editing)
    }, 500)
}

const clearBtn = () => {
    setTimeout(() => {
        tableEdit.value.clearEditing(true)
    }, 3000)
}

const resetBtn = () => {
    state.data = [
        {
            id: 1,
            date: '2016-05-03',
            time: '',
            timerange: [],
            name: 'Tom',
            address: 'changed',
            age: [1],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 1,
        },
        {
            id: 3,
            date: '2016-05-04',
            time: '19:00:00',
            timerange: [],
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            age: [3],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 0,
        },
        {
            id: 4,
            date: '2016-05-01',
            time: '20:00:00',
            timerange: [],
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
            age: [4],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 1,
        },
        {
            id: 5,
            date: '2016-05-01',
            time: '20:00:00',
            timerange: [],
            name: 'Tom',
            address: 'new',
            age: [4],
            daterange: ['2022-03-18', '2022-03-20'],
            sex: 1,
        },
    ]
}

const compareChange = () => {
    tableEdit.value.compareChange(state.orgData, 'id').then((e:Array<any>) => {
        console.log(e)
    }).catch(() => {})
}

const currentChange = (val:number) => {
    console.log('outer-currentChange', val)
}

const rowClick = (row:unknown) => {
    console.log('rowClick')
}

const beforeDelete = (row:unknown) => new Promise<void>((resolve, reject) => {
    console.log(row)
    resolve()
})
const formatter = (row:any, column:any) => {
    if (column.property === 'address') {
        return `formatter+${row.address}`
    }
}
const dateChange = () => {
    console.log('dateChange')
}

const editColumns = () => {
    // state.columns.splice(0, 1)
    if (state.columns.length) {
        state.columns = []
    } else {
        state.columns = ['index', 'date', 'daterange', 'time']
    }
}

onMounted(() => {

})

// defineExpose({

// })
</script>
<style lang="scss" scoped>

</style>
